<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
  </head>
  <body>
    <!-- 路由的传参
        1.利用touter-link 传参
        通过方法切换路由之后，地址栏上是 http://127.0.0:5500/vue_router3.html#/news/001
        获取这个参数：$route.params.id获取

         2.

       可以通过JS来实现路由的跳转
        $router.push()方法来实现路由的跳转 
        $router.go()
    -->
    <div id="box">
      <!-- 创建一些跳转的按钮 通过js跳转 -->
      <div>
        <input type="button" value="跳转的首页" @click="fn1()"/>
        <input type="button" value="跳转到新闻页"  @click="fn2()"/>
        <input type="button" value="跳转到用户也" @click="fn3()"/>
        <input type="button" value="前进一夜" @click="fn4()"/>
        <input type="button" value="前进一页" @click="fn5()"/>
        <input type="button" value="后退一页" @click="fn6()"/>
        <input type="button" value="后退一夜" @click="fn7()"/>
      </div>
        <router-view></router-view>
      <!-- 设定一个路由的内容在touter-view中 -->
    </div>

    <script>
      //创建路由
      const router = new VueRouter({
          routes:[
              {
                  path:"/index/:id",
                  name:'index',
                  component:{
                      template:`<div>首页{{$route.params.id}}<div>`
                  }
              },
              {
                  path:'/news/:id',
                  name:'news',
                  component:{
                      template:`<div>新闻页：{{$route.params.id}}</div>`
                  }
              },
              {
                  path:'/user',
                  name:'user',
                  component:{
                      template:`<div>用户{{$route.query.id}}</div>`
                  }
              }

          ]
      })

      let vm = new Vue({
          el:'#box',
          data:{},
          router,
          methods:{
              fn1(){
                  this.$router.replace({name:'index',params:{id:Math.random()}})
              },
              fn2(){
                  this.$router.push(`/news/${Math.random()}`)
              },
              fn3(){
                  this.$router.push({
                      path:'/user',
                      query:{
                          id:Math.random()
                      }
                  })
              },
          }
      })
    </script>
  </body>
</html>
